<template>
<a-carousel :style="{height: carouselHeight+'px'}" autoplay touchMove :autoplaySpeed="3000">
    <div class="carousel-item">
      <div class="carousel-item-content" :style="{height: carouselHeight+'px'}"></div>
    </div>
  </a-carousel>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount} from 'vue'
const deviceWidth = ref<number>(375)
const carouselHeight = ref<number>(200)

// 新增：更新设备宽度的方法
const updateDeviceWidth = () => {
  const container = document.querySelector('.app-layout-content') as HTMLElement
  deviceWidth.value = container.offsetWidth
  const bl = 375/200
  carouselHeight.value = deviceWidth.value / bl
}

onMounted(() => {
 updateDeviceWidth()
 window.addEventListener('resize', updateDeviceWidth)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', updateDeviceWidth)
})
</script>

<style scoped>
.carousel-item {
  background-color:  #364d79;
}
</style>